<template>
    <ui-main>
        <div class="p20 bg-grey">

            <section class="flex row-center mb40">
                <el-button-group>
                    <el-button class="ui-button-tab" type="default" @click="$router.push('/cepin')">最新</el-button>
                    <el-button class="ui-button-tab" type="default" @click="$router.push('/cepin-list')">全部测评</el-button>
                    <el-button class="ui-button-tab" type="primary" @click="$router.push('/cepin-video-list')">测评视频</el-button>
                </el-button-group>
            </section>

            <div class="flex">
                <section style="width:926px;" class="mr20">
                    <!-- 文章列表 -->
                    <div class="flex-5 bg-white">
                        <div v-for="item in dataList" @click="link(item.id)" class="flex ui-border-bottom cursor-pointer ui-hover-shadow p10 mr30" >
                            <ui-img v-if="item.smeta" :url="item.smeta.thumb" style="width:180px;height:140px"></ui-img>
                            <div class="flex-1 ml15 flex column column-col-between">
                                <div>
                                    <div class="f18 mb15">{{item.post_title}}</div>
                                    <div class="flex row-between mb15">
                                        <div class="flex col-center">
                                            <ui-img v-if="item.smeta" :url="item.smeta.thumb" size="30px" class="bg-grey ui-circle"></ui-img>
                                            <span class="ml5">{{item.user_nicename || item.user_login || '匿名用户'}}</span>
                                            <span class="ml20 f10 f-color-grey">{{item.post_modified}}({{item.show_time}})</span>
                                        </div>
                                        <div class="f10 flex opacity-02">
                                            <div class="mr10 flex col-center">
                                                <icon name="comment" class="mr5"></icon> {{item.comment_count}}
                                            </div>
                                            <div class=" flex col-center">
                                                <icon name="star" class="mr5"></icon> {{item.favorite_num}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="f-color-text clamp-4">{{item.post_excerpt}}</div>
                                </div>
                                <div class="text-right f-color-blue">{{item.post_mime_type}}</div> 
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div class="text-center mt15">
                        <el-pagination
                        @current-change="fetchList"
                        :current-page.sync="pageCurrent"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper"
                        :total="parseInt(pageTotal)">
                        </el-pagination>
                    </div>
                </section>

                <rightSide></rightSide>
            </div>


        </div>
    </ui-main>

</template>

<script>
    import rightSide from './列表页右侧.vue'
    export default {
        components:{
            rightSide
        },
        data(){
            return {
                dataList:[],
                pageCurrent:1,
                pageSize:10,
                pageTotal:0,

            }
        },
        methods:{
            echartPie(value=0){
                const colors = ['#ff6c00', '#eee'];
                return {
                    colors: colors,
                    series: [
                        {
                            data: [
                                { value: value, name: '' },
                                { value: 100-value, name: '' },
                            ],
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        return colors[params.dataIndex];
                                    },
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                        }
                    ]
                }
            },
            tabChange(index){
                // 点亮按钮
                this.tabList.forEach((item) => {
                    item.isActive=false
                })
                this.tabList[index].isActive = true

                // 当前分页重置
                this.pageCurrent = 1

                // 查询列表
                this.fetchList()
            },
            link(id){
                this.$router.push({
                    name:'文章详情',
                    query:{
                        id:id
                    }
                })
            },
            fetchList(){//更新列表数据
                // 查询数据
                this.$http.get('index.php?g=home&m=content&a=sql_posts_paged', {
                    params:{
                        page_size: this.pageSize,
                        page_no: this.pageCurrent,
                        cid: 15
                    }
                })
                .then(({data})=>{
                    console.log('测评视频列表',data);
                    if (data.code===1) {
                        this.dataList = data.data
                        this.pageTotal = data.total
                    }
                })
            }
        },
        mounted(){
            this.fetchList()

        },
    }
</script>